<template>
  <div class="zeroswiper">
    <div class="banner" v-if="bannerList.length">
      <!-- 轮播图组件 -->
      <swiper :options="swiperOption" ref="mySwiper"> 
        <swiper-slide v-for="(item, index) in bannerList" :key="index">
          <img :src="item.pic " />
          <!-- <img :src="item.picUrl+'?param=300y120'" /> -->
        </swiper-slide>
      </swiper>
      <div class="swiper-pagination" slot="pagination"></div>
    </div>
  </div>
</template>


<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "zeroswiper",
  data() {
    return {
      //轮播图参数
      swiperOption: {
        notNextTick: true,
        loop: true,
        initialSlide: 1,
        speed: 500, //切换速度
        watchSlidesProgress: true, //开启这个参数来计算每个slide的progress
        centeredSlides: true, //设定为true时，活动块会居中，而不是默认状态下的居左。
        spaceBetween: 10, //两图之间的间隔
        slidesPerView: 1.2, //左右两图显示的宽度
        // observer: true, //修改swiper自己或子元素时，自动初始化swiper
        // observeParents: true, //修改swiper的父元素时，自动初始化swiper
        pagination: {
          el: ".swiper-pagination"
        },
        lazy: {
          loadPrevNext: true
        },
        autoplay: true
      }
    };
  },
  props: {
    bannerList: {
      default:[],
    }
  },
  // 轮播图的数据
  computed: {
    // 获取swiper实例
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },

  // 轮播图的组件
  components: {
    swiper,
    swiperSlide
  }
};
</script>


<style lang='scss' scoped>
$zerocolor: #d43c33;
$fontcolor: #333;
.zeroswiper {
  // 轮播图
  .banner {
    width: 100%;
    height: 100%;
    max-height: 300px;
    margin: 0 auto;
    position: relative;
    .swiper-container {
      height: 100%;
      .swiper-slide {
        border-radius: 10px;
        overflow: hidden;
        height: 94%;
        margin-top: 5px;
        transition: all 0.5s;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .swiper-slide-active {
        margin-top: 0;
        height: 100%;
      }
    }
    .swiper-pagination {
      position: absolute;
      bottom: 0;
      left: 50%;
      z-index: 5;
      transform: translateX(-50%);
      .swiper-pagination-bullet-active {
        background: $zerocolor;
      }
    }
  }
}
</style>